<template>
  <div id="map" style="width: 100%; height: 100px;" />
</template>

<script>
let self
import { getResourceLink } from '@/utils/index'
export default {
  name: 'QQMap',
  props: {
    showSatellite: {
      type: Boolean,
      default: true
    },
    bottomOffset: {
      type: Number,
      default: 10
    },
    registerMapMouseUp: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      map: undefined,
      isPan: false,
      isPointMarker: false,
      pointIconMarker: undefined,
      pointTextMarker: undefined,
      lineMarker: undefined
    }
  },
  watch: {
    showSatellite: function(newVal, oldVal) {
      self.changeMapLayer()
    }
  },
  created() {
    self = this
  },
  mounted() {
    this.initMap()
  },
  destroyed() {
    this.destoryMap()
  },
  methods: {
    initMap() {
      try {
        this.destoryMap()
        const el = document.getElementById('map')
        const height = window.innerHeight - el.getBoundingClientRect().top - this.bottomOffset
        el.style.height = `${height}px`
        const center = this.createPoint(this.$appConfig.mapConfig.lat, this.$appConfig.mapConfig.lng)
        let baseMap = {
          type: 'satellite',
          features: ['base']
        }
        if (!this.showSatellite) {
          baseMap = {
            type: 'vector'
          }
        }

        this.map = new TMap.Map(el, {
          center: center,
          zoom: this.$appConfig.mapConfig.initScale,
          viewMode: '2D',
          doubleClickZoom: false,
          baseMap: baseMap,
          maxZoom: this.$appConfig.mapConfig.maxScale
        })

        this.lineMarker = new TMap.MultiPolyline({
          id: 'line-marker',
          map: this.map,
          styles: {
            line: new TMap.PolylineStyle({
              color: '#f37b1d',
              width: 6,
              borderWidth: 0,
              borderColor: '#FFF',
              lineCap: 'round',
              showArrow: true
            })
          },
          geometries: []
        })

        this.pointIconMarker = new TMap.MultiMarker({
          id: 'point-icon-marker',
          map: this.map,
          styles: {
            marker: new TMap.MarkerStyle({
              width: 32,
              height: 32,
              anchor: { x: 16, y: 32 },
              src: getResourceLink('/static/images/orient/orient-point.png')
            })
          },
          geometries: []
        })

        this.pointTextMarker = new TMap.MultiLabel({
          id: 'point-text-layer',
          map: this.map,
          styles: {
            label: new TMap.LabelStyle({
              color: '#f37b1d',
              size: 20,
              offset: { x: 0, y: -42 },
              angle: 0,
              alignment: 'center',
              verticalAlignment: 'middle'
            })
          },
          geometries: []
        })

        this.pointIconMarker.on('mousedown', this.onPointMarkerMouseDown)
        this.lineMarker.on('click', this.onLineMarkerClick)
        if (this.registerMapMouseUp) {
          this.map.on('mouseup', this.onMapMouseUp)
        }

        this.map.on('panstart', this.onMapPanStart)
        this.map.on('panend', this.onMapPanEnd)
        this.$emit('mapCreate', true)
      } catch (e) {
        console.log(e)
        this.$emit('mapCreate', false)
      }
    },
    destoryMap() {
      if (this.map) {
        this.map.destroy()
        this.map = undefined
      }
    },
    createPoint(lat, lng) {
      return new TMap.LatLng(lat, lng)
    },
    changeMapLayer() {
      if (!this.map) {
        return
      }

      if (this.showSatellite) {
        this.map.setBaseMap({
          type: 'satellite',
          features: ['base']
        })
      } else {
        this.map.setBaseMap({
          type: 'vector'
        })
      }
    },
    onMapMouseUp(e) {
      if (this.isPan) {
        this.isPan = false
        return
      }

      if (this.isPointMarker) {
        this.isPointMarker = false
        return
      }

      console.log('onMapMouseUp')
      this.$emit('onMapMouseUp', e.latLng)
    },
    onMapPanStart() {
      this.isPan = true
    },
    onMapPanEnd() {
      this.isPan = false
    },
    addOrientPoint(point) {
      const position = this.createPoint(point.lat, point.lng)
      const orientPoint = {
        id: point.id,
        styleId: 'marker',
        position: position,
        properties: point
      }

      const orientPointLabel = {
        id: point.id,
        styleId: 'label',
        position: position,
        content: point.name,
        properties: point
      }

      this.pointIconMarker.add([orientPoint])
      this.pointTextMarker.add([orientPointLabel])
    },
    removeOrientPoint(id) {
      this.pointIconMarker.remove([id])
      this.pointTextMarker.remove([id])
    },
    updateOrientPoint(point) {
      if (!point.id) {
        return
      }

      this.removeOrientPoint(point.id)
      this.addOrientPoint(point)
    },
    onPointMarkerMouseDown(e) {
      if (this.isPan) {
        this.isPan = false
        return
      }
      this.isPointMarker = true
      const point = e.geometry.properties
      if (point) {
        this.$emit('onPointMarkerMouseDown', point)
      }
    },
    addLine(start, end) {
      const path = [
        this.createPoint(start.lat, start.lng),
        this.createPoint(end.lat, end.lng)
      ]
      const id = end.id
      const line = {
        id,
        styleId: 'line',
        paths: path,
        properties: {
          start,
          end
        }
      }

      this.lineMarker.add([line])
    },
    removeLine(end) {
      this.lineMarker.remove([end.id])
    },
    onLineMarkerClick(e) {
      // console.log(e.geometry.properties)
      this.$emit('onLineMarkerClick', e.geometry.properties)
    },
    setCenter(point) {
      if (!this.map) {
        return
      }

      const p = this.createPoint(point.lat, point.lng)
      this.map.setCenter(p)
    }
  }
}
</script>

<style scoped>

</style>
